<template>
  <view class="confirmOrder">
    <view class="editaddress">
      <view class="content">
        <view class="row">
          <view class="nominal">收货人</view>
          <view class="input"
            ><input
              placeholder="请输入收货人姓名"
              v-model="addressData.realName"
              type="text"
            />
          </view>
        </view>
        <view class="row">
          <view class="nominal">手机号码</view>
          <view class="input"
            ><input
              placeholder="请输入收货人电话号码"
              v-model="addressData.phone"
              type="number"
              maxlength="11"
          /></view>
        </view>
        <view class="row">
          <view class="nominal">所在地区</view>
          <view class="input selectcity" @tap="openPicker">
            <input
              placeholder="请选择省市区"
              disabled
              type="text"
              v-model="addressData.address"
            />
            <image src="/static/right.png" class="rights"></image>
          </view>
        </view>
        <view class="row">
          <view class="nominal">详细地址</view>
          <view class="input">
            <!-- <input placeholder="输入详细地址" type="textarea" v-model="addressData.moreAddres" /> -->
            <textarea
              style="font-size: 28upx"
              v-model="addressData.detail"
              auto-height="true"
              placeholder="输入详细地址"
            ></textarea>
          </view>
        </view>
        <view class="row">
          <view class="nominal" style="color: 666; margin-top: 10upx"
            >设为默认地址</view
          >
          <view class="input switch">
            <switch
              color="#ff4254"
              style="transform: scale(0.6)"
              @change="switchChange"
              :checked="addressData.isDefault == 0"
            ></switch>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="submit" @click="submit">保存</view>
      </view>

      <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
      <cc-selectCity
        :province="addressData.province"
        :city="addressData.city"
        :area="addressData.area"
        :show="show"
        @changeClick="changeClick"
        @sureSelectArea="onsetCity"
        @hideShow="onhideShow"
      ></cc-selectCity>
    </view>
  </view>
</template>

<script>
import address from "@/api/address.js";
export default {
  data() {
    return {
      addressData: {
        realName: "",
        phone: "",
        address: "",
        detail: "",
        isDefault: 1,
        province: "广东省",
        city: "广州市",
        area: "天河区",
      },
      show: false,
      isShow: true,
      saveOrEdit: true,
    };
  },
  onLoad(option) {
    if (option.id) {
      this.getAddressInfo(option.id);
      this.saveOrEdit = false;
    } else {
      uni.setNavigationBarTitle({
        title: "新建地址",
      });
      this.saveOrEdit = true;
    }
  },
  methods: {
    getAddressInfo(id) {
      address.getAddressById(id).then((res) => {
        res.data.address =
          res.data.province + res.data.city + res.data.district;
        res.data.area = res.data.district;
        this.addressData = res.data;
      });
    },
    submit() {
      this.addressData.district = this.addressData.area;
      if (this.saveOrEdit) {
        address.saveAddress(this.addressData).then((res) => {
          if (res.code == 200) {
			  
			  uni.showToast({
			    title: "保存成功！",
			    icon: "none",
			  });
			  
			  setTimeout(() => {
			    uni.navigateBack();
			  }, 1500);
			  
          }
        });
      } else {
        address.updateAddress(this.addressData).then((res) => {
          if (res.code == 200) {
			  uni.showToast({
			    title: "保存成功！",
			    icon: "none",
			  });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
          }
        });
      }
    },
    openPicker() {
      this.show = true;
    },

    changeClick(value, value2, value3) {
      console.log("地址选择器 = " + value + value2 + value3);
      this.addressData.province = value;
      this.addressData.city = value2;
      this.addressData.area = value3;
    },
    onhideShow() {
      this.show = false;
    },
    //选中省市区
    onsetCity(e) {
      let data = e.detail.target.dataset;
      let address = data.province + data.city + data.area;
      this.show = false;
      this.addressData.address = address;
    },
    switchChange(e) {
      console.log("e----", e);
      if (e.detail.value) {
        this.addressData.isDefault = 0;
      } else {
        this.addressData.isDefault = 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.confirmOrder {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;

  .bottom {
    width: 100%;
    height: 150rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15rpx 30rpx;
    font-size: 30rpx;

    .submit {
      width: 80%;
      height: 80rpx;
      background-color: #000;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 25px;
    }
  }
}
</style>
<style lang="scss" scoped>
.save {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.save view {
  display: flex;
}

.save .btn {
  box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
  width: 70%;
  height: 80upx;
  border-radius: 80upx;
  background-color: #f23a3a;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 30upx;
  margin-bottom: 60px;
}

.save .btn .icon {
  height: 80upx;
  color: #fff;
  font-size: 30upx;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.content view {
  display: flex;
}

.content .row {
  width: 94%;
  margin: 1% 3%;
  border-bottom: solid 1upx #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content .row .nominal {
  width: 30%;
  height: 80upx;
  font-size: 28upx;
  font-family: Droid Sans Fallback;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  align-items: center;
}

.content .row .input {
  width: 70%;
  padding: 20upx 0;
  align-items: center;
  font-size: 28upx;
}

.content .row .input input {
  font-size: 28upx;
  color: #333333;
}

.content .row .switch {
  justify-content: flex-end;
}

.content .row .input textarea {
  min-height: 40upx;
  line-height: 40upx;
}

.content .del_box {
  width: 100%;
  display: block;
  overflow: hidden;
  margin-right: 30upx;
}

.content .del {
  width: 240upx;
  height: 80upx;
  float: right;
  justify-content: center;
  align-items: center;
  font-size: 28upx;
  color: #f23a3a;
  margin: 0 auto;
  margin-top: 50upx;
  border-radius: 38upx;
  background-color: rgba(255, 0, 0, 0.05);
  border-bottom: solid 1upx #eee;
}

.selectcity input {
  width: 90%;
}

.selectcity image {
  width: 40upx;
  height: 40upx;
  float: right;
}
</style>
